<template>
    <div class="home_box">
        <div style="padding: 20px">
            <div class="nav">
                <el-form :model="form" label-width="auto"
                    style="max-width: 550px;display: flex; justify-content: space-between;">
                    <el-form-item label="客户名称">
                        <el-input v-model="form.keyword" placeholder="请输入客户名称/手机号" clearable />
                    </el-form-item>
                    <div>
                        <el-button type="primary" @click="handleInquire">查询</el-button>
                        <el-button type="primary" @click="centerDialogVisible">添加客户</el-button>
                       

                    </div>

                </el-form>
            </div>
            <div class="content">
                <el-table :data="tableData.list" style="width: 100%">
                    <el-table-column prop="name" label="客户姓名" />
                    <!-- <el-table-column prop="name" label="客户姓名" width="120" /> -->

                    <el-table-column prop="phone" label="手机号" />
                    <el-table-column prop="wx_nickname" label="微信昵称" />
                    <el-table-column label="头像" width="120">
                        <!-- 头像 -->
                        <template v-slot="scope">
                            <div class="demo-image__preview">
                                <el-image class="tGoods=mg" :src="scope.row.wx_avatar">
                                    <div class="image-slot">
                                        <span></span>
                                    </div>
                                    <template #error>
                                        暂无数据
                                    </template>
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="company_name" label="单位名称" />
                    <el-table-column prop="balance" label="余额" />
                    <el-table-column prop="update_time" label="创建时间" width="150" />
                    <el-table-column label="操作">
                        <template #default>
                            <el-button link type="primary" size="small" @click="handleRedact"> 编辑 </el-button>
                            <el-button link type="primary" size="small" @click="handleDelete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <!-- <el-pagination v-model:current-page="form.page" v-model:page-size="form.list_rows"
                    :page-sizes="[5, 10, 20, 30]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->


                <!-- 分页组件 -->
                <myPagination :total="tableData.total" v-model:pageNo="form.page" v-model:pageSize="form.list_rows"
                    @handleChange="handleInquire" @pageNoinsatl="pageNoinsatl" />
           
            </div>
        </div>
    </div>

    <!-- 添加客户 -->
    <div>
        <dialogComponent :showAddServerDialog="showAddServerDialog"  @isShow = "isShow" @confirm="confirm"></dialogComponent>
        <!-- <el-dialog v-model="centerDialogVisible" title="Warning" width="500" center>
            <span>
                It should be noted that the content will not be aligned in center by
                default
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog> -->
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import myPagination from '@/components/pagination/index.vue';
import dialogComponent from './dialogComponent/index.vue';
const { proxy } = getCurrentInstance();


// 项目初始化调用
onMounted(() => { handleInquire() })

// 节流
// let setdate = ref(false);
// async function handleInquire() {
//     if(setdate.value) return;
//     setdate.value = true;
//     let res = await proxy.$api.sys_user.customer(form);
//     tableData.list = res.data.list
//     tableData.total = res.data.total
//     setTimeout(()=> setdate.value = false,2000)
// }




// 请求数据
let setdate1 = ref(false);
const form = reactive({ keyword: '', list_rows: 5, page: 1 });
const tableData = reactive({ list: [], total: 0 })
async function handleInquire() {
     // 增加防抖
    if (setdate1.value) return;
    setdate1.value = true;
    let res = await proxy.$api.sys_user.customer(form);
    setdate1.value = false;
    tableData.list = res.data.list
    tableData.total = res.data.total
}


// 解决切换分页之后切换页码条数的bug
const pageNoinsatl = () => { form.page = 1; console.log(form.page); }



// 添加客户按钮
const showAddServerDialog = ref(false) //弹框
function centerDialogVisible(val) { showAddServerDialog.value = val; console.log(showAddServerDialog.value,val,'>>>>>>>>>daying');}

// 取消
const isShow = (value) => { showAddServerDialog.value= value }
// 确定
const confirm = (value) => { showAddServerDialog.value= value }
// 编辑
const handleRedact = () => {
    console.log('click')
}

// 删除
const handleDelete = () => {
    console.log('click')
}









</script>

<style>
.el-main {
    background-color: #f2f2f2;
    height: 100%;
}

.home_box {
    background-color: #fff;
    height: 100%;
}

.el-input__wrapper {
    width: 280px;
}
</style>
